<template>
  <div id="app">
    <ul class="list">
      <li
          @dragenter="dragenter($event, index)"
          @dragover="dragover($event)"
          @dragstart="dragstart(index)"
          draggable="true"
          v-for="(item, index) in nameList"
          :key="item.label"
          class="list-item"
      >
        <div>
          <gupiao :Gname='item.label'></gupiao>
        </div>


      </li>
    </ul>
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
    >
    </vue-particles>

  </div>
</template>

<script>
import gupiao from '@/components/gupiao'

export default {
  name: 'App',
  data() {
    return {
      nameList: [
        {label: '上证指数'},
        {label: '博彦科技'},
        {label: '拓维信息'},
        // {label: '南天信息'},
        // {label: '值得买'},
        // {label: '苏试试验'},
        // {label: '阿石创'},
        // {label: '三七互娱'},
        // {label: '牧原股份'},
        // {label: '中国卫通'},
        {label: '东方国信'},
        // {label: '汤姆猫'},
        // {label: 'sh204001'},
      ],

      // dragIndex: ''
    }
  },
  components: {
    gupiao
  },
  methods: {
    dragstart(index) {
      this.dragIndex = index;
    },
    dragenter(e, index) {
      e.preventDefault();
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const source = this.nameList[this.dragIndex];
        this.nameList.splice(this.dragIndex, 1);
        this.nameList.splice(index, 0, source);
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index;
      }
    },
    dragover(e) {
      e.preventDefault();
    },
  },

}
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 20px;*/
  //background: #110d0d;
}

#particles-js {
  width: 100%;
  //height: calc(100% - 100px);
  position: absolute;
  overflow: hidden;
}

.list {
  list-style: none;

  .drag-move {
    transition: transform .3s;
  }

  .list-item {
    cursor: move;
    //width: 300px;
    //background: #EA6E59;
    border-radius: 4px;
    //color: #FFF;
    margin-bottom: 6px;
    //height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

</style>
